import {designPage, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import data from '../../../data/data-50.json';
import {Button, ButtonGroup, Plc, PlcIndex, Table} from "../../../../packages";
import {delay} from "plain-utils/utils/delay";

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({ table: Table });

  return () => (
    <DemoRow title="同步格式化值">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
      </ButtonGroup>
      <Table data={data} showRows={10} ref={onRef.table}>
        <PlcIndex/>
        <Plc title="名称" field="name"/>
        <Plc title="电话号码" field="tel"/>
        <Plc title="电话号码(tel)" field="tel" formatter="tel" width={150}/>
        <Plc title="整数" field="float"/>
        <Plc title="整数(int)" field="float" formatter="int"/>
        <Plc title="金额" field="num" align="right"/>
        <Plc title="金额(money)" field="num" formatter="money" align="right"/>
        <Plc title="人民币" field="num" align="right"/>
        <Plc title="人民币(cny)" field="num" formatter="cny" align="right"/>
        <Plc title="百分比" field="percent" align="right"/>
        <Plc title="百分比(percent)" field="percent" formatter="percent" align="right"/>
      </Table>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({ table: Table });

  const statusMap: any = {
    primary: '基础',
    success: '成功',
    warn: '警告',
    error: '错误',
    info: '通知',
  };

  const statusAsyncFormatter = async (value: string | null) => {
    await delay(Math.random() * 3000);
    return !value ? null : statusMap[value];
  };

  return () => (
    <DemoRow title="异步格式化值">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
      </ButtonGroup>
      <Table data={data} showRows={10} ref={onRef.table}>
        <PlcIndex/>
        <Plc title="名称" field="name"/>
        <Plc title="状态" field="status"/>
        <Plc title="状态asyncFormatter" field="status" asyncFormatter={statusAsyncFormatter}/>
      </Table>
    </DemoRow>
  );
});
